<template>
  <div class="textarea-limit">
    <a-textarea :placeholder="placeholder" :value="value" :rows="6" :maxLength="maxLength" @input="handleInput" />
    <div class="num-box">{{now}}/{{maxLength}}</div>
  </div>
</template>
<script>
  export default {
    props: {
      placeholder: {
        type: String,
        default: '请输入...'
      },
      value: {
        type: String | Number | Array | Object,
        default: ''
      },
      maxLength: {
        type: Number,
        default: 500
      }
    },
    data() {
      return {
        now: (this.value + '').length
      }
    },
    methods: {
      handleInput(e) {
        this.now = e.target.value.length
        this.$emit('input', e.target.value)
      }
    }
  }
</script>
<style lang="less" scoped>
  .textarea-limit{
    position: relative;
    .num-box{
      position: absolute;
      right: 8px;
      bottom: 3px;
      font-size: 12px;
    }
  }
</style>